import React, { useEffect, useState, useRef } from 'react';
import { Form, Button, Card, Breadcrumb, Radio, Select, DatePicker, Upload, Table, Space, Tag, Modal, message } from 'antd'
import { Link, useHistory } from 'react-router-dom/cjs/react-router-dom.min';
import './Article.scss'
import "moment/locale/zh-cn";
import { UseDispatch, useDispatch, useSelector } from 'react-redux';
import locale from "antd/es/date-picker/locale/zh_CN";
import { EditOutlined, DeleteOutlined, FrownOutlined } from '@ant-design/icons'
import { getChannels, getArticles, delArticle } from '../../store/actions/article';
import Img from '../../assets/cxy.jpg'
import Channel from '../../components/Channel/Channel'
import Im from '../../../src/assets/log.jpg'
function Article(props) {
    const [showContent, setShowContent] = useState(false)
    const { channels, results, page, per_page, total_count } = useSelector((state) => state.article)
    const dispatch = useDispatch()
    const history = useHistory()
    useState({})
    const ref = useRef()
    useEffect(() => {
        dispatch(getChannels())
        // 获取文章数据
        dispatch(getArticles(params.current))
        const timer = setTimeout(() => {
            setShowContent(true)
        }, 500)
        return () => clearTimeout(timer)
    }, [dispatch])
    // 编辑信息
    const editArticleFn = id => {
        history.push(`/publish/${id}`)

    }
    const columns = [
        {
            title: '封面',
            dataIndex: "cover",
            key: "cover",
            render: (cover) => (
                <img
                    src={cover?.images?.[0] || Img}
                    style={{ objectFit: "cover" }}
                    width={200}
                    height={120}
                />
            ),
        },
        {
            title: '标题',
            dataIndex: "title",
            key: "title",
        },
        {
            title: '状态',
            dataIndex: "status",
            key: "status",
            render: (status) => {
                const info = statusLabel[status];
                return <Tag color={info.color}>{info.text}</Tag>
            }
        },
        {
            title: '发布时间',
            dataIndex: "pubdate",
            key: "pubdate",
        },
        {
            title: '阅读数',
            dataIndex: "read_count",
            key: "read_count",
        },
        {
            title: '评论数',
            dataIndex: "comment_count",
            key: "comment_count",
        },
        {
            title: '点赞数',
            dataIndex: "like_count",
            key: "like_count",
        },
        {
            title: '操作',
            key: "action",
            render: (text, record) => (
                <Space size="middle">
                    {/* 编辑按钮 */}
                    <Button type='link' onClick={() => editArticleFn(record.id)} icon={<EditOutlined />} />
                    <Button onClick={() => delArticleFn(record.id)} type='link' icon={<DeleteOutlined />} />
                </Space>
            )
        },
    ]
    // 删除
    const delArticleFn = (id, record) => {
        Modal.confirm({
            title: `您是否要删除该文章`,
            cancelText: '取消',
            okText: "确定",
            onOk: async () => {
                await dispatch(delArticle(id))
                await dispatch(getArticles(params.current))
                message.success('删除成功')
            }
        })
    }
    const statusLabel = [
        { text: '草稿', color: "default" },
        { text: '待审核', color: "blue" },
        { text: '审核通过', color: "green" },
        { text: '审核拒绝', color: "red" },
    ]
    const onFinish = (values) => {
        console.log(values);
        const params = {}
        params.status = values.status;
        params.channel_id = values.channel_id;
        if (values.dateArr) {
            params.begin_pubdate = values.dateArr[0].format(
                "YYY-MM-DD HH:mm:ss"
            );
            params.end_pubdate = values.dateArr[1].format(
                "YYY-MM-DD HH:mm:ss"
            )
        } else {
            params.begin_pubdate = undefined;
            params.end_pubdate = undefined;
        }
        dispatch(getArticles(params))
    }
    // 改变分页size重新渲染
    const onPageChange = (page, pageSize) => {
        const params = {}
        params.current.page = 1
        params.current.per_page = pageSize
        dispatch(getArticles(params.current))
    }
    // 请求参数
    const params = useRef({
        page: 1,
        per_page: 20,
        channel_id: undefined,
        status: undefined,
        begin_pubdate: undefined,
        end_pubdate: undefined
    })
    return (
        <div>
            {showContent ? (
                <div>
                    <Card
                        // 面包屑
                        title={
                            <Breadcrumb>
                                <Breadcrumb.Item>
                                    <Link to="/">首页</Link>
                                </Breadcrumb.Item>
                                <Breadcrumb.Item>内容管理</Breadcrumb.Item>
                            </Breadcrumb>
                        }
                    >
                        {/* 表单 */}
                        <Form onFinish={onFinish}>
                            <Form.Item label="状态:" name="status">
                                <Radio.Group>
                                    <Radio value={undefined}>全部</Radio>
                                    <Radio value={0}>草稿</Radio>
                                    <Radio value={1}>待审核</Radio>
                                    <Radio value={2}>已通过</Radio>
                                    <Radio value={3}>已拒绝</Radio>
                                </Radio.Group>
                            </Form.Item>
                            <Form.Item label="频道:" name="channel_id">
                                <Channel width={288} />
                            </Form.Item>
                            <Form.Item label="日期:" name="dateArr">
                                <DatePicker.RangePicker locale={locale}>
                                </DatePicker.RangePicker>
                            </Form.Item>
                            <Form.Item>
                                <Button type='primary' htmlType='submit'>筛选</Button>
                            </Form.Item>
                        </Form>
                    </Card>
                    <Card
                        title={'根据筛选条件工查询到100条结果'}
                        style={{ marginTop: '24px' }}
                    >
                        <Table columns={columns} rowKey="id" dataSource={results} pagination={{
                            current: page,
                            pageSize: per_page, total: total_count, onChange: onPageChange
                        }} />
                    </Card>
                </div>
            ) : (
                <img className='log' src={Im} alt="" />
            )}

        </div>
    );
}

export default Article;